<!DOCTYPE html>
<html lang="zh-Hans">

	<head>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta charset="utf-8">
		<title>我的粉丝</title>
		<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<meta http-equiv="Cache-Control" content="no-siteapp">
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script src="js/hmt.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="css/loaders.min.css" />
		<link rel="stylesheet" type="text/css" href="css/loading.css" />
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="css/mui.min.css" />
		<script type="text/javascript" src="js/mui.js"></script>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			$(window).load(function() {
				$(".loading").addClass("loader-chanage")
				$(".loading").fadeOut(300)
			})
		</script>

		<style>
			.div1 {
				margin-top: 2%;
				padding-top: 5px;
				padding-bottom: 5px;
				display: block;
				clear: both;
				text-align: center;
				/*visibility:hidden;*/
				background-color: #FB9542;
			}
			
			#head {
				width: 100%;
				height: 30px;
			}
			
			#head ul {
				padding: 0;
				margin: 0;
				padding-top: 5px;
				padding-left: 5px;
			}
			
			#head ul li {
				list-style: none;
				float: left;
				text-decoration: none;
				display: block;
				width: 80px;
				padding: 5px;
				margin: 0px 10px 0px 0px;
				position: relative;
			}
			
			#head ul li a {
				text-decoration: none;
				color: #000000;
			}

			.huiyuan_li_01 {
				border-top-color: #F6C;
				border-right-color: #F6C;
				border-left-color: #F6C;
				box-shadow: orange 3px 0 20px;
				font-family: "微软雅黑";
				margin-right: 3px;
				margin-top: 10px;
				padding: 1px 15px 1px;
				border-radius: 40px;
				font-size: 10px;
				border: transparent solid 1px;
			} 
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
			.huiyuan01_img_01{
				height: 55px;
			}
			.mui-table-view-condensed{
				margin-top: 20px;
			}
		</style>

	</head>

	<div class="loading">
		<div class="loader">
			<div class="loader-inner pacman">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</div>

	<body class="fx-center">

		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">我的粉丝</h1>
		</header>
		<div class="mui-content">
			<div class="div1">
				<a href="#" onclick="create()">
					<span style="color: #FFF; font-size: 18px;">我要代言</span>
				</a>
			</div>
			<div id="head">
				<ul>
					<li id="L1" class="huiyuan_li_01" style="text-align: center; background-color: orange;">
						一级会员
					</li>
					<li id="L2" class="huiyuan_li_01" style="text-align: center; background-color: white;">
						二级会员
					</li>
				</ul>
			</div>
			<div id="d0">
				<ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="images/self-tou.png" class="huiyuan01_img_01"/>
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">星尘</h4>
										<span class="oa-contact-position mui-h6">一级会员</span>
									</div>
									<p class="oa-contact-email mui-h6">
										ID：<span id="">100000000</span>
									</p>
								</div>
							</div>
						</div>
					</li>
					<li class="mui-table-view-cell">
						<div class="mui-slider-cell">
							<div class="oa-contact-cell mui-table">
								<div class="oa-contact-avatar mui-table-cell">
									<img src="uploads/timg.jpg" class="huiyuan01_img_01"/>
								</div>
								<div class="oa-contact-content mui-table-cell">
									<div class="mui-clearfix">
										<h4 class="oa-contact-name">柯南</h4>
										<span class="oa-contact-position mui-h6">一级会员</span>
									</div>
									<p class="oa-contact-email mui-h6">
										ID：<span id="">200000000</span>
									</p>
								</div>
							</div>
						</div>
					</li>
				</ul>
			</div>
			
			<div id="d1">
				
			</div>
			
			<div id="d2">
				
			</div>
		</div>

		<script>
			function create() {
				var w = plus.webview.create('dinpu.html');
				w.show(); 
			}
			
			var L1 = document.getElementById("L1");
			var L2 = document.getElementById("L2");
			var d1 = document.getElementById("d1");
			var d2 = document.getElementById("d2");
			var d0 = document.getElementById("d0");
			L1.addEventListener('tap',function(){
					d0.innerHTML = " ";
					d2.innerHTML = " ";
					L1.style.backgroundColor = "orange";
					L2.style.backgroundColor = "white";
					$( "#d1" ).load( "huiyuan01.html", function( response, status, xhr ) {
				  		$('#d1').html(response);
					});
				})
			L2.addEventListener('tap',function(){
					d0.innerHTML = "";
					d1.innerHTML = "";
					L1.style.backgroundColor = "white";
					L2.style.backgroundColor = "orange";
					$( "#d2" ).load( "huiyuan02.html", function( response, status, xhr ) {
				  		$('#d2').html(response);
					});
				})

		</script>

	</body>
</html>